{{ extend './layout/layout'}}

{{block 'css'}}
<link rel="stylesheet" href="https://cdn.bootcss.com/dplayer/1.22.2/DPlayer.min.css">
<style>
    .layui-col-md12 a {
        display: inline-block;
    }

    .layui-col-md12 img {
        width: 200px;
        line-height: 200px;
    }

    .layui-col-md12 p {
        margin: 5px 0px;
        text-align: center;
        width: 100%;
    }

    .layui-col-md12 span {
        color: grey;
    }

    .layui-col-md12 strong {
        color: #FFB800;
    }
</style>

{{/block}}

{{block 'content'}}
<div class="layui-row">
    <div class="layui-col-md12 layui-col-space10">
        <a class="" href="http://vt1.doubanio.com/201807121428/b4bcdc7ca1e03e7c8e3c64a7b38be674/view/movie/M/402310127.mp4">
            <img src="https://img3.doubanio.com/view/photo/l_ratio_poster/public/p2513360824.jpg">
            <p>
                <span>昆池岩</span>
                <strong>6</strong>
            </p>
        </a>
        <a href="http://vt1.doubanio.com/201807121428/b4bcdc7ca1e03e7c8e3c64a7b38be674/view/movie/M/402310127.mp4">
            <img src="https://img3.doubanio.com/view/photo/l_ratio_poster/public/p2513360824.jpg">
            <p>
                <span>昆池岩</span>
                <strong>6</strong>
            </p>
        </a>
        <a href="http://vt1.doubanio.com/201807121428/b4bcdc7ca1e03e7c8e3c64a7b38be674/view/movie/M/402310127.mp4">
            <img src="https://img3.doubanio.com/view/photo/l_ratio_poster/public/p2513360824.jpg">
            <p>
                <span>昆池岩</span>
                <strong>6</strong>
            </p>
        </a>
        <a href="http://vt1.doubanio.com/201807121428/b4bcdc7ca1e03e7c8e3c64a7b38be674/view/movie/M/402310127.mp4">
            <img src="https://img3.doubanio.com/view/photo/l_ratio_poster/public/p2513360824.jpg">
            <p>
                <span>昆池岩</span>
                <strong>6</strong>
            </p>
        </a>
        <a href="http://vt1.doubanio.com/201807121428/b4bcdc7ca1e03e7c8e3c64a7b38be674/view/movie/M/402310127.mp4">
            <img src="https://img3.doubanio.com/view/photo/l_ratio_poster/public/p2513360824.jpg">
            <p>
                <span>昆池岩</span>
                <strong>6</strong>
            </p>
        </a>
        <a href="http://vt1.doubanio.com/201807121428/b4bcdc7ca1e03e7c8e3c64a7b38be674/view/movie/M/402310127.mp4">
            <img src="https://img3.doubanio.com/view/photo/l_ratio_poster/public/p2513360824.jpg">
            <p>
                <span>昆池岩</span>
                <strong>6</strong>
            </p>
        </a><a href="">
        <img src="https://img3.doubanio.com/view/photo/l_ratio_poster/public/p2513360824.jpg">
        <p>
            <span>昆池岩</span>
            <strong>6</strong>
        </p>
    </a><a href="">
        <img src="https://img3.doubanio.com/view/photo/l_ratio_poster/public/p2513360824.jpg">
        <p>
            <span>昆池岩</span>
            <strong>6</strong>
        </p>
    </a><a href="">
        <img src="https://img3.doubanio.com/view/photo/l_ratio_poster/public/p2513360824.jpg">
        <p>
            <span>昆池岩</span>
            <strong>6</strong>
        </p>
    </a><a>
        <img src="https://img3.doubanio.com/view/photo/l_ratio_poster/public/p2513360824.jpg">
        <p>
            <span>昆池岩</span>
            <strong>6</strong>
        </p>
    </a><a>
        <img src="https://img3.doubanio.com/view/photo/l_ratio_poster/public/p2513360824.jpg">
        <p>
            <span>昆池岩</span>
            <strong>6</strong>
        </p>
    </a><a>
        <img src="https://img3.doubanio.com/view/photo/l_ratio_poster/public/p2513360824.jpg">
        <p>
            <span>昆池岩</span>
            <strong>6</strong>
        </p>
    </a>
    </div>
</div>
{{/block}}

{{block 'js'}}
<script type="text/javascript" src="https://cdn.bootcss.com/dplayer/1.22.2/DPlayer.min.js"></script>
<script type="text/javascript">
	layui.use('layer', function () {
		const layer = layui.layer;
		const $ = layui.jquery;

		let player = null;

//		$('#myModal').on('hidden.bs.modal', function (e) {
//			if (player && player.pause) player.pause()
//		});

		$('.layui-col-md12 a').click(function (e) {
//			var video = $(this).data('video');
//			var image = $(this).attr('src');

			let video = '/images/1111.mov';
			let image = '/images/zhichi.png';
			let title = '功夫小子';

			layer.open({
				title: false,
				type: 1,
				offset: 'auto',
				id: 'player',//防止重复弹出
				area: ['800px', '450px'],
				content: `<div id="dplayer"></div>`,
				shade: 0.3, //不显示遮罩
				shadeClose: true,
				yes: function () {
					layer.closeAll();
					player.destroy()
				}
			})
			;


			if (!player) {
				player = new DPlayer({
					container: document.getElementById('dplayer'),
					screenshot: true,
					video: {
//					url: 'http://vt1.doubanio.com/201807121428/b4bcdc7ca1e03e7c8e3c64a7b38be674/view/movie/M/402310127.mp4',
						url: video,
						pic: image,
						thumbnails: image
					}
				})
			} else {
							console.log(player.video)
//				if (player.video.currentSrc !== video) {
//					player.switchVideo({
//						url: video,
//						pic: image,
//						type: 'auto'
//					})
//				}
			}

//			player.on('seeked', function (time) {
//				player.seek(player.video.currentTime);
//
//			});

		})
	})
</script>
{{/block}}